<template>
  <div class="wraps">
    <!-- 左上 -->
    <div class="upperleft">
      <h1>用户（游客）视角</h1>
      <p>"便捷预订，畅享无忧旅程"</p>
      <ul>
        <li>随时随地浏览心仪酒店，直观比价与房型筛选，一键完成预订。</li>
        <li>实时确认订单状态，行程变更灵活调整，专属客服7×24小时在线支持。</li>
        <li>个性化推荐贴合需求，会员积分兑换惊喜福利，让每一次出行都更省心。</li>
      </ul>
    </div>

    <!-- 右上 -->
    <div class="upperRight">
      <h1>商家（酒店经营者）视角</h1>
      <p>"智能管理，提升经营效率"</p>
      <ul>
        <li>一站式客房管理系统，实时更新房态与价格，减少超售风险。</li>
        <li>多渠道订单自动同步，减少人工操作，提升客户响应速度。</li>
        <li>数据分析直观呈现入住率、营收趋势，辅助决策优化定价策略。</li>
        <li>客户关系管理精准触达，会员体系增强复购率，提升酒店口碑。</li>
      </ul>
    </div>

    <!-- 左下 -->
    <div class="lowerLeft">
      <h1>管理员（集团/平台管理者）视角</h1>
      <p>"全局掌控，轻松调度资源"</p>
      <ul>
        <li>多门店统一管理，实时监控运营数据，远程配置系统参数。</li>
        <li>权限分级精细管理，财务数据自动汇总，降低人力成本。</li>
        <li>智能报表生成，直观展示业绩表现，支持多维度数据导出。</li>
        <li>系统安全稳定，定期功能更新，无需技术团队即可快速部署。</li>
      </ul>
    </div>

    <!-- 右下 -->
    <div class="lowerRight">
      <h1>系统使用体验视角</h1>
      <p>"简洁高效，释放管理潜力"</p>
      <ul>
        <li>界面设计：直观清晰的操作面板，响应式布局适配多设备，减少学习成本。</li>
        <li>功能体验：客房管理、订单处理、客户服务全流程覆盖，无缝衔接。</li>
        <li>技术支持：专业团队7×24小时在线响应，定期系统维护与功能升级。</li>
        <li>数据安全：银行级加密保障客户信息，多重备份防止数据丢失。</li>
      </ul>
    </div>

  </div>
</template>

<script>

export default {
  name: "index",
  components: { },

  created() {

  },
  methods: {}
}
</script>

<style scoped>
.wraps {
  position: relative;
  background-size: cover;
  width: 100%;
  height: calc(100vh - 134px);
  overflow: hidden; /* 防止 leftpart 超出 wrap */
}

/* 左上 */
.upperleft {
  position: absolute;
  top: 1%; /* 距离上面 6% */
  bottom: 51%; /* 距离下面 60% */
  left: 0.5%; /* 距离左侧1% */
  width: 49%;
  border: 1px solid #D9EDF7;
}

/* 左下 */
.lowerLeft {
  position: absolute;
  top: 50%; /* 距离上面 43% */
  bottom: 1%; /* 距离下面 50% */
  left: 0.5%; /* 距离左侧1% */
  width: 49%;
  border: 1px solid #D9EDF7;
}

/* 右上 */
.upperRight {
  position: absolute;
  top: 1%; /* 距离上面 6% */
  bottom: 51%; /* 距离下面 60% */
  left: 50.5%; /* 距离左侧1% */
  width: 49%;
  border: 1px solid #D9EDF7;
}

/* 右下 */
.lowerRight {
  position: absolute;
  top: 50%; /* 距离上面 43% */
  bottom: 1%; /* 距离下面 50% */
  left: 50.5%; /* 距离左侧1% */
  width: 49%;
  border: 1px solid #D9EDF7;
}
h1{
  text-align: center;
  padding-top: 20px;
  color: #2558b3;
}
p{
  text-align: center;
  color: #666;
  padding-top: 20px;
}
ul li{
  font-size: large;
  text-align: center;
  color: black;
  padding-top: 20px;
}

</style>
